<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="输入标题搜索">
          <el-input v-model="selectData.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList.comList" border style="width: 100%">
      <el-table-column prop="u_id" label="ID" />
      <el-table-column prop="openid" label="微信编码" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="password" label="密码" />
    </el-table>
    <!--分页查询-->
    <pagination :total="selectData.count" @change-page='changePage' @change-pageSize='changePageSize'/>
  </div>
</template>

<script lang="ts">
import { tsGetUserList } from "../api/tsApi";
import { UserData, UserInt } from "../type/user";
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import pagination from "../components/pagination.vue"
export default defineComponent({
  components: { pagination },
  setup() {
    const data = reactive(new UserData());

    onMounted(() => {
      getUserList();
    });
    const getUserList = () => {
      tsGetUserList({ type: 1 }).then((res) => {
        data.selectData.count = res.data.length;
        data.list = res.data;
      });
    };

    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice(
          (data.selectData.page - 1) * data.selectData.pageSize,
          data.selectData.page * data.selectData.pageSize
        );
      }),
    });

    const changePage = (page)=>{
      data.selectData.page = page
    }

    const changePageSize = (pageSize)=>{
      data.selectData.pageSize = pageSize
    }

    //搜索必须配上watch函数监听。重置数组
    const onSubmit = () => {
      let arr: UserInt[] = [];
      if (data.selectData["username"]) {
        arr = data.list.filter((res:any) => {
           return res["username"].indexOf(data.selectData["username"]) !== -1;         
        });
        console.log(arr)
      } else {
        arr = data.list;
      }
      data.selectData.count = arr.length;
      data.list = arr;
    };

    watch([() => data.selectData.username], () => {
      if (data.selectData.username === "") {
        getUserList();
      }
    });

    return { ...toRefs(data), dataList, changePage, changePageSize, onSubmit };
  },
});
</script>

<style scoped>
</style>